<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}MY FFTD{% endblock title %}</title>
    <link rel="stylesheet" href="{{ url_for('blog.static', filename='css/style.css') }}">
    <!-- <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
    <link rel="stylesheet" href="{{ url_for('blog.static', filename='css/buefy.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('blog.static', filename='css/materialdesignicons.min.css') }}">
    {% block extra_head_style %}{% endblock extra_head_style %}
</head>

<body>
    <div id="app" style="height:100%;">
        <div class="container is-fluid1" style="height:100%; ">
            <div class="is-block" style="height:100%;">
                <!-- 导航 -->
                {% block navbar %}
                <template>
                    <b-navbar spaced shadow>
                        <template #brand>
                            <b-navbar-item>
                                <img src="{{ url_for('blog.static', filename='img/logo.jpg') }}" alt="FlaskBlog">
                            </b-navbar-item>
                        </template>
                        <template #start>
                            {% for cate in categorys %}
                            <b-navbar-item {% if cate.cate_id==cate_id %} class="has-text-primary" {% endif %}
                                href="{{ url_for('blog.cates', cate_id=cate.cate_id) }}">
                                {{ cate.name }}
                            </b-navbar-item>
                            {% endfor %}
                        </template>

                        <template #end>
                            <b-navbar-item tag="div">
                                <!-- 判断用户是否已登录 -->
                                {% if g.user %}
                                <div class=" buttons">
                                    <!-- 获取用户信息 -->
                                    <a class="button is-primary">Welcome! {{ g.user['username'] }}</a>
                                    {% if g.user.is_super_user %}
                                    <a class="button is-success" href="{{ url_for('admin.index') }}">Managing users</a>
                                    {% else %}
                                    <a class="button is-success" href="{{ url_for('auth.userinfo') }}">Personal Center</a>
                                    {% endif %}
                                    <!-- 显示退出按钮 -->
                                    <a class="button is-danger" href="{{ url_for('auth.logout') }}">Login out</a>
                                </div>
                                {% else %}
                                <!-- 用户未登录，显示登录注册按钮 -->
                                <div class="buttons">
                                    <a class="button is-primary" href="{{ url_for('auth.register') }}">
                                        <strong>Sign up</strong>
                                    </a>
                                    <a class="button is-light" href="{{ url_for('auth.login') }}">Log
                                        in</a>
                                </div>
                                {% endif %}
                            </b-navbar-item>
                        </template>
                    </b-navbar>
                </template>
                {% endblock navbar %}
                <!-- 导航 end -->

                {% block main %}
                <div class="box is-marginless is-shadowless is-radiusless">
                    {% block box %}
                    <div class="columns is-multiline">
                    </div>

                    {% endblock box %}
                </div>
                {% endblock main %}
            </div>

        </div>
    </div>

    <script src="{{ url_for('blog.static', filename='js/vue.js') }}"></script>
    <script src="{{ url_for('blog.static', filename='js/buefy.min.js') }}"></script>
    {% block extra_foot_script %}{% endblock extra_foot_script %}
    <script>
        var app = new Vue({
            el: '#app',
            data: {},
            methods: {}
        })
    </script>
    {% block vue_script %}{% endblock vue_script %}
</body>

</html>